<template>
  <div class="type-nav">
    <div class="container">
      <!-- 标题 -->
      <div>
        <h2 class="all">全部商品分类</h2>
      </div>      
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
      
      <!-- 侧边栏 -->
      <div class="sort">
        <div class="all-sort-list2">
          <!-- 图书~~ -->
          <div class="item">
            <h3><a href="">图书、音像、电子书刊</a></h3>

            <div class="item-list clearfix">    
              <div class="subitem">

                <dl class="fore">
                  <dt><a href="">电子书刊</a></dt>
                  <dd>
                    <em><a href="">电子书</a></em>
                    <em><a href="">网络原创</a></em>
                    <em><a href="">数字杂志</a></em>
                    <em><a href="">多媒体图书</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">音像</a></dt>
                  <dd>
                    <em><a href="">音乐</a></em>
                    <em><a href="">影视</a></em>
                    <em><a href="">教育音像</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">英文原版</a></dt>
                  <dd>
                    <em><a href="">少儿</a></em>
                    <em><a href="">商务投资</a></em>
                    <em><a href="">文学</a></em>
                    <em><a href="">传记</a></em>
                    <em><a href="">励志</a></em>                  
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">文艺</a></dt>
                  <dd>
                    <em><a href="">小说</a></em>
                    <em><a href="">文学</a></em>
                    <em><a href="">青春文学</a></em>
                    <em><a href="">传记</a></em>
                    <em><a href="">艺术</a></em>     
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">少儿</a></dt>
                  <dd>
                    <em><a href="">少儿</a></em>
                    <em><a href="">0-2岁</a></em>
                    <em><a href="">3-6岁</a></em>
                    <em><a href="">7-10岁</a></em>
                    <em><a href="">11-14岁</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">人文社科</a></dt>
                  <dd>
                    <em><a href="">历史</a></em>
                    <em><a href="">哲学</a></em>
                    <em><a href="">国学</a></em>
                    <em><a href="">政治/军事</a></em>
                    <em><a href="">法律</a></em>
                    <em><a href="">人文社科</a></em>
                    <em><a href="">心理学</a></em>
                    <em><a href="">文化</a></em>
                    <em><a href="">社会科学</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">经管励志</a></dt>
                  <dd>
                    <em><a href="">经济</a></em>
                    <em><a href="">金融与投资</a></em>
                    <em><a href="">管理</a></em>
                    <em><a href="">励志与成功</a></em>   
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">生活</a></dt>
                  <dd>
                    <em><a href="">生活</a></em>
                    <em><a href="">健身与保健</a></em>
                    <em><a href="">家庭与育儿</a></em>
                    <em><a href="">旅游</a></em>
                    <em><a href="">烹饪美食</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">科技</a></dt>
                  <dd>
                    <em><a href="">工业技术</a></em>
                    <em><a href="">科普读物</a></em>
                    <em><a href="">建筑</a></em>
                    <em><a href="">医学</a></em>
                    <em><a href="">科学与自然</a></em>
                    <em><a href="">计算机与互联网</a></em>
                    <em><a href="">电子通信</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">教育</a></dt>
                  <dd>
                    <em><a href="">中小学教辅</a></em>
                    <em><a href="">教育与考试</a></em>
                    <em><a href="">外语学习</a></em>
                    <em><a href="">大中专教材</a></em>
                    <em><a href="">字典词典</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">港台图书</a></dt>
                  <dd>
                    <em><a href="">艺术/设计/收藏</a></em>
                    <em><a href="">经济管理</a></em>
                    <em><a href="">文化/学术</a></em>
                    <em><a href="">少儿</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">其他</a></dt>
                  <dd>
                    <em><a href="">工具书</a></em>
                    <em><a href="">杂志/期刊</a></em>
                    <em><a href="">套装书</a></em>
                  </dd>
                </dl>

              </div>  
            </div>

          </div>
          <!-- 手机 -->
          <div class="item">
            <h3>
              <a href="">手机</a>
            </h3>

            <div class="item-list clearfix">    
              <div class="subitem">

                <dl class="fore">
                  <dt><a href="">手机通信</a></dt>
                  <dd>
                    <em><a href="">手机</a></em>
                    <em><a href="">对讲机</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">运营商</a></dt>
                  <dd>
                    <em><a href="">合约机</a></em>
                    <em><a href="">选好中心</a></em>
                    <em><a href="">装宽带</a></em>
                    <em><a href="">办套餐</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">手机配件</a></dt>
                  <dd>
                    <em><a href="">移动电源</a></em>
                    <em><a href="">电池/移动电源</a></em>
                    <em><a href="">蓝牙耳机</a></em>
                    <em><a href="">充电器/数据线</a></em>
                    <em><a href="">苹果周边</a></em>
                    <em><a href="">手机耳机</a></em>
                    <em><a href="">手机贴膜</a></em>
                    <em><a href="">手机存储卡</a></em>
                    <em><a href="">充电器</a></em>
                    <em><a href="">数据线</a></em>
                    <em><a href="">手机保护套</a></em>
                    <em><a href="">车载配件</a></em>
                    <em><a href="">iPhone配件</a></em>
                    <em><a href="">手机电池</a></em>
                    <em><a href="">创意配件</a></em>
                    <em><a href="">便携/无线音箱</a></em>
                    <em><a href="">手机配件</a></em>
                    <em><a href="">拍照配件</a></em>
                    <em><a href="">手机支架</a></em>                  
                  </dd>
                </dl>             

              </div>  
            </div>
          </div>
          <!-- 家用电器 -->
           <div class="item">

            <h3>
              <a href="">家用电器</a>
            </h3>

            <div class="item-list clearfix">  
              <div class="subitem">
                <dl class="fore">
                  <dt><a href="">大家电</a></dt>
                  <dd>
                    <em><a href="">平板电脑</a></em>
                    <em><a href="">空调</a></em>
                    <em><a href="">冰箱</a></em>
                    <em><a href="">洗衣机</a></em>
                    <em><a href="">家庭影院</a></em>
                    <em><a href="">DVD/电视盒子</a></em>
                    <em><a href="">迷你音响</a></em>
                    <em><a href="">冰箱/冰吧</a></em>
                    <em><a href="">家电配件</a></em>
                    <em><a href="">功放</a></em>
                    <em><a href="">回音壁/Soundbar</a></em>
                    <em><a href="">Hi-Fi专区</a></em>
                    <em><a href="">电视盒子</a></em>
                    <em><a href="">酒柜</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">厨卫大电</a></dt>
                  <dd>
                    <em><a href="">燃气灶</a></em>
                    <em><a href="">油烟机</a></em>
                    <em><a href="">热水器</a></em>
                    <em><a href="">消毒柜</a></em>
                    <em><a href="">洗碗机</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">厨房小电</a></dt>
                  <dd>
                    <em><a href="">料理机</a></em>
                    <em><a href="">榨汁机</a></em>
                    <em><a href="">电饭煲</a></em>
                    <em><a href="">电压力锅</a></em>
                    <em><a href="">豆浆机</a></em>
                    <em><a href="">咖啡机</a></em>
                    <em><a href="">微波炉</a></em>
                    <em><a href="">电烤箱</a></em>
                    <em><a href="">电磁炉</a></em>
                    <em><a href="">面包机</a></em>
                    <em><a href="">煮蛋器</a></em>
                    <em><a href="">酸奶机</a></em>
                    <em><a href="">电焖锅</a></em>
                    <em><a href="">电水壶/热水壶</a></em>
                    <em><a href="">电饼铛</a></em>
                    <em><a href="">多用途锅</a></em>
                    <em><a href="">电烧烤炉</a></em>
                    <em><a href="">蔬菜解毒器</a></em>
                    <em><a href="">其他厨房家电</a></em>
                    <em><a href="">养生壶/煎药壶</a></em>
                    <em><a href="">电热盒饭</a></em>                                      
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">生活电器</a></dt>
                  <dd>
                    <em><a href="">取暖电器</a></em>
                    <em><a href="">净化器</a></em>
                    <em><a href="">加湿器</a></em>
                    <em><a href="">扫地机器人</a></em>
                    <em><a href="">吸尘器</a></em>
                    <em><a href="">挂熨器/熨斗</a></em>
                    <em><a href="">插座</a></em>
                    <em><a href="">电话机</a></em>
                    <em><a href="">清洁机</a></em>
                    <em><a href="">除湿器</a></em>
                    <em><a href="">干洗机</a></em>
                    <em><a href="">收音/录音</a></em>
                    <em><a href="">电风扇</a></em>
                    <em><a href="">冷风扇</a></em>
                    <em><a href="">其他生活电器</a></em>
                    <em><a href="">生活电器配件</a></em>
                    <em><a href="">净水器</a></em>
                    <em><a href="">饮水机</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">个护健康</a></dt>
                  <dd>
                    <em><a href="">剃须刀</a></em>
                    <em><a href="">剃/脱毛器</a></em>
                    <em><a href="">口腔护理</a></em>
                    <em><a href="">电风扇</a></em>
                    <em><a href="">美容器</a></em>
                    <em><a href="">理发器</a></em>
                    <em><a href="">卷/直发器</a></em>
                    <em><a href="">按摩椅</a></em>
                    <em><a href="">足浴盆</a></em>
                    <em><a href="">血压计</a></em>
                    <em><a href="">电子秤/厨房秤</a></em>
                    <em><a href="">血糖仪</a></em>
                    <em><a href="">体温计</a></em>
                    <em><a href="">其它健康电器</a></em>
                    <em><a href="">计步器/脂肪检测仪</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">五金家装</a></dt>
                  <dd>
                    <em><a href="">电动工具</a></em>
                    <em><a href="">手动工具</a></em>
                    <em><a href="">仪器仪表</a></em>
                    <em><a href="">浴霸/排风扇</a></em>
                    <em><a href="">灯具</a></em>
                    <em><a href="">LED灯</a></em>
                    <em><a href="">洁身器</a></em>
                    <em><a href="">水槽</a></em>
                    <em><a href="">龙头</a></em>
                    <em><a href="">洗浴花洒</a></em>
                    <em><a href="">厨卫五金</a></em>
                    <em><a href="">门铃</a></em>
                    <em><a href="">电器开关</a></em>
                    <em><a href="">插座</a></em>
                    <em><a href="">电工电料</a></em>
                    <em><a href="">监控安防</a></em>
                    <em><a href="">电线/线缆</a></em>
                  </dd>
                </dl>
              </div> 
            </div>
          </div>
          <!-- 数码 -->
          <div class="item">
            <h3>
              <a href="">数码</a>
            </h3>

            <div class="item-list clearfix">    
              <div class="subitem">

                <dl class="fore">
                  <dt><a href="">摄影摄像</a></dt>
                  <dd>
                    <em><a href="">数码相机</a></em>
                    <em><a href="">单电/微电相机</a></em>
                    <em><a href="">反向相机</a></em>
                    <em><a href="">摄像机</a></em>
                    <em><a href="">拍立得</a></em>
                    <em><a href="">运动相机</a></em>
                    <em><a href="">镜头</a></em>
                    <em><a href="">户外器材</a></em>
                    <em><a href="">影棚器材</a></em>
                    <em><a href="">冲印服务</a></em>
                    <em><a href="">数码相框</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">数码配件</a></dt>
                  <dd>
                    <em><a href="">存储卡</a></em>
                    <em><a href="">读卡器</a></em>
                    <em><a href="">滤镜</a></em>
                    <em><a href="">闪光灯/手柄</a></em>
                    <em><a href="">相机包</a></em>
                    <em><a href="">三脚架/云台</a></em>
                    <em><a href="">相机清洁/贴膜</a></em>
                    <em><a href="">机身附件</a></em>
                    <em><a href="">镜头附件</a></em>
                    <em><a href="">电池/充电器</a></em>
                    <em><a href="">移动电源</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">智能设备</a></dt>
                  <dd>
                    <em><a href="">智能手环</a></em>
                    <em><a href="">智能手表</a></em>
                    <em><a href="">智能眼镜</a></em>
                    <em><a href="">运动跟踪器</a></em>
                    <em><a href="">健康监测</a></em>
                    <em><a href="">智能配饰</a></em>
                    <em><a href="">智能家居</a></em>
                    <em><a href="">体感车</a></em>
                    <em><a href="">其它设备</a></em>
                    <em><a href="">智能机器人</a></em>
                    <em><a href="">无人机</a></em>                  
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">影视娱乐</a></dt>
                  <dd>
                    <em><a href="">MP3/MP4</a></em>
                    <em><a href="">智能设备</a></em>
                    <em><a href="">耳机/耳麦</a></em>
                    <em><a href="">无线音箱</a></em>
                    <em><a href="">音箱</a></em>
                    <em><a href="">高清播放器</a></em>
                    <em><a href="">收音机</a></em>
                    <em><a href="">麦克风</a></em>
                    <em><a href="">专业音频</a></em>
                    <em><a href="">苹果配件</a></em>     
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">电子教育</a></dt>
                  <dd>
                    <em><a href="">学生平板</a></em>
                    <em><a href="">点读机</a></em>
                    <em><a href="">早教益智</a></em>
                    <em><a href="">录音笔</a></em>
                    <em><a href="">电子词典</a></em>
                    <em><a href="">复读机</a></em>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt><a href="">虚拟商品</a></dt>
                  <dd>
                    <em><a href="">延保服务</a></em>
                    <em><a href="">杀毒软件</a></em>
                    <em><a href="">积分商品</a></em>
                  </dd>
                </dl>
              </div>  
            </div>

          </div>
          <div class="item">
            <h3>
              <a href="">家居家装</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">电脑办公</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">厨具</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">个护化妆</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">服饰内衣</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">钟表</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">鞋靴</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">母婴</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">礼品箱包</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">食品饮料、保健食品</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">珠宝</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">汽车用品</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>
          <div class="item">
            <h3>
              <a href="">运动健康</a>
            </h3>

            <div class="item-list-clearfix">      
            </div>
          </div>

        </div>
      </div> 

    </div>
  </div>
</template>

<script>


export default {
  name: "TypeNav",
}
</script>

<style scoped>
  .type-nav {
    border-bottom: 2px solid #e1251b;
  }
  .type-nav .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
  }
  .type-nav .container .all {
    width: 210px;
    height: 45px;
    background-color: #e1251b;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
  .type-nav .container .all a {
    height: 45px;
    margin: 0 22px;
    line-height: 45px;
    font-size: 16px;
    /* color: #333; */
  }
  .type-nav .container .nav a {
    height: 45px;
    margin: 0 22px;
    line-height: 45px;
    font-size: 16px;
    /* color: #333;       */
    font-size: 16px;
  }


  /* 左边栏 */
  .type-nav .container .sort {
    position: absolute;
    left: 0;
    top: 47px;
    width: 210px;
    height: 461px;
    position: absolute;
    background: #fafafa;
    z-index: 999;
  }
  .type-nav .container .all-sort-list2 .item h3 {
    line-height: 28px;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    padding: 0 20px;
    margin: 0;
  }
  .type-nav .container .all-sort-list2 .item a {
    color: #333;
    text-decoration: none;
  }
  .type-nav .container .all-sort-list2 .item h3 .cur {
    background: skyblue;
  }
  .type-nav .container .all-sort-list2 .item h3:hover{
    background-color: rgb(180, 180, 180);
  }
  .type-nav .container .all-sort-list2 .item:hover .item-list {
    display: block;
  } 


  /* 隐藏 左边栏侧边框 */
  .type-nav .container .all-sort-list2 .item .item-list {
    display: none;
    position: absolute;
    width: 734px;
    min-height: 460px;
    background: #f7f7f7;
    left: 210px;
    border: 1px solid #ddd;
    top: 0;
    z-index: 9999 !important;

    font-size: 13px;
  }

  .type-nav .container .all-sort-list2 .item .subitem {
    float: left;
    width: 650px;
    padding: 0 4px 0 8px;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl {
    border-top: 1px solid #eee;
    padding: 5.8px 0;
    overflow: hidden;
    zoom: 1;
  }
  .type-nav .container .all-sort-list2 .item .subitem .fore {
    border-top: 0;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl dt {
    float: left;
    width: 54px;
    line-height: 22px;
    text-align: right;
    padding: 3px 6px 0 0;
    font-weight: 700;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl dd {
    float: left;
    width: 415px;
    padding: 3px 0 0;
    overflow: hidden;
  }
  .type-nav .container .all-sort-list2 .item .subitem dl dd em {
    float: left;
    height: 14px;
    line-height: 14px;
    padding: 0 8px;
    margin-top: 5px;
    border-left: 1px solid #ccc;
    
    font-weight: 500;
  }

</style>